import React, { PureComponent } from 'react'
import './style.styl';
export default class SelectGroup extends PureComponent<SelectGroupProps> {
    state = {
        selected:this.props.value || this.props.defaultSelected
    }

    componentWillReceiveProps(newProps){
        if(newProps.value !== this.props.value){
            this.setState({selected: newProps.value})
        }
    }
    render() {
        const { children, className, activeClass } = this.props;
        const newChild = [];
        React.Children.forEach(children,(child:any, index) => {
            let newProps = {
                key:index,
                ...child.props,
            }
            if(this.state.selected === child.props.value){
                newProps.className = `${activeClass} ${newProps.className}`
            }
            newChild.push(React.cloneElement(child, newProps))
        })
        return (
            <div className={`select-group ${className}`} onClick={this.props.onClick}>
                {newChild}
            </div>
        )
    }
}
